<template>
    <div class="dashboard-container">

      <!-- 顶部操作栏 -->
      <div class="search">
        <el-form :inline="true" class="left" size="mini">
          <el-form-item>
            <el-button type="primary" @click="handleAdd('create')">
              <i class="el-icon-plus"></i>
              新增
            </el-button>
          </el-form-item>
          <!-- <el-form-item>
            <el-button type="danger" @click="getData">
              <i class="el-icon-delete-solid"></i>
              删除
            </el-button>
          </el-form-item> -->
        </el-form>
        <el-form :inline="true" :model="params" class="right" size="mini">
          <el-form-item>
            <el-select v-model="params.companyId" placeholder="请选择公司">
                <el-option v-for="item in companyList" :key="item.value" :label="item.label" :value="item.value"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item>
            <el-input placeholder="请输入部门名称" v-model="params.name" clearable></el-input>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" plain @click="handleSearch">
              查询
              <i class="el-icon-search"></i>
            </el-button>
          </el-form-item>
        </el-form>
      </div>

      <!-- 内容栏 -->
      <div class="body">

        <!-- 列表 -->
        <el-table :data="list" v-loading="loading">
          <el-table-column label="部门名称" prop="name"></el-table-column>
          <el-table-column label="所属部门" prop="parent.name"></el-table-column>
          <el-table-column label="所属公司" prop="company.name"></el-table-column>
          <el-table-column label="创建时间" prop="createTime"></el-table-column>
          <el-table-column label="操作">
            <template slot-scope="{row}">
              <el-button type="text" @click="handleAdd('update', row)">
                <i class="el-icon-edit-outline"></i>
                编辑
              </el-button>
              <el-button type="text danger" @click="handleDelete(row.id)">删除</el-button>
              <el-button type="text" @click="handleAddSon(row)">
                添加子部门
              </el-button>
            </template>
          </el-table-column>
        </el-table>

        <!-- 分页 -->
        <div class="page">
          <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="params.pageIndex+1"
            :page-sizes="[10, 20, 30, 40]"
            :page-size="params.pageCount"
            layout="total, sizes, prev, pager, next, jumper"
            :total="total">
          </el-pagination>
        </div>

      </div>

      <!-- 新增、编辑 -->
      <el-dialog 
        :visible.sync="dialogVisible" 
        :title="dialogType=='create'?'创建部门':'编辑部门'"
        :close-on-click-modal="false"
        @close="dialogVisible=false"
        width="600px"
      >
        <el-form ref="form" :rules="rules" :model="temp" label-width="100px">
          <el-form-item prop="companyId" label="公司" v-if="!temp.is_son">
            <el-select v-model="temp.companyId" placeholder="请选择公司" style="width: 100%;">
                <el-option v-for="item in companyList" :key="item.value" :label="item.label" :value="item.value"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="部门名称" prop="name">
            <el-input placeholder="请输入部门名称" v-model="temp.name"></el-input>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="submit('form')">提交</el-button>
            <el-button @click="dialogVisible = false">取消</el-button>
          </el-form-item>
        </el-form>
      </el-dialog>

    </div>
</template>
  
<script>
import { mapGetters } from 'vuex'
import { companyGetList } from '@/api/company';
import { departmentCreate, departmentUpdate, departmentGetList, departmentDelete } from '@/api/department'
import moment from 'moment'
  
export default {
    name: 'StaffDepartment',
    computed: {
      ...mapGetters([
        'name'
      ])
    },
    data(){
      return {
        rules: {
          name: [{ required: true, message: '请输入部门名称', trigger: 'blur' }],
          companyId: [{ required: true, message: '请选择公司', trigger: 'blur' }],
          
        },
        params: {
          companyId: '',
          pageCount: 10,
          pageIndex: 0,
          name: '',
          userType: 2
        },
        total: 0,
        list: [],
        dialogVisible: false,
        dialogType: 'create',
        temp: {
          name: '',
          userType: 1,
          parentId: '',
          companyId: ''
        },
        loading: false,
        companyList: [],
      }
    },
    mounted(){
      this.handleSearch();
    },
  
    methods:{
        //获取公司列表
      async getCompany(){
        let data = await companyGetList({ pageCount: 9999, userType: 2 });
        this.companyList = data.list.map(item=>{
            return { label: item.name, value: item.id }
        })
      },
      //点击添加子部门
      handleAddSon(row){
        this.dialogType = 'create';
        this.dialogVisible = true;
        this.temp = {
            companyId: row.companyId,
            name: '',
            userType: row.userType,
            parentId: row.id,
            is_son: true
        }
      },
      // 点击删除
      handleDelete(id){
        this.$confirm('此操作将永久删除该部门, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(async () => {
          await departmentDelete({ id })
          this.getData();
          this.$message({
            type: 'success',
            message: '删除成功!'
          });
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          });          
        });
      },
      //提交表单
      submit(formName){
        this.$refs[formName].validate(async (valid) => {
          if (valid) {
            if(this.dialogType =='create'){
              await departmentCreate(this.temp)
              this.$message.success('创建成功')
            }else{
              await departmentUpdate(this.temp)
              this.$message.success('修改成功')
            }
            this.handleSearch();
            this.dialogVisible = false;
          } else {
            console.log('error submit!!');
            return false;
          }
        });
      },
      // 点击新增、编辑
      handleAdd(type, row){
        this.dialogType = type;
        this.dialogVisible = true;
        if(type=='create'){
          this.temp = {
            companyId: '',
            name: '',
            parentId: '',
            userType: 2,
          }
        }else{
          this.temp = JSON.parse(JSON.stringify(row))
        }
        this.getCompany();
      },
      //修改搜索条件
      handleSearch(){
        this.params.pageIndex = 0;
        this.getData();
      },
      //加载列表数据
      async getData(){
        this.loading = true
        let data = await departmentGetList(this.params)
        this.loading = false;
        this.total = data.totalCount;
        this.list = data.list.map(item=>{
          item.createTime = moment(item.createTime).format('YYYY-MM-DD HH:mm:ss')
          return item;
        });
      },
      // 修改每页数量
      handleSizeChange(val){
        this.params.pageIndex = 0;
        this.params.pageCount = val;
        this.getData();
      },
      // 切换分页
      handleCurrentChange(val){
        this.params.pageIndex = val - 1;
        this.getData();
      }
    }
}
</script>
  
<style lang="scss" scoped>
.dashboard {
    &-container {
      margin: 30px;
      position: relative;
      .right{
        position: absolute;
        right: 0;
        top: 0;
      }

      .page{
        padding: 20px 0;
        text-align: center;
      }
    }
    &-text {
      font-size: 30px;
      line-height: 46px;
    }
}
</style>
  